<template>
  <div>
    <el-dialog
      :title="typeName=='look'?this.$t('common.look'):this.$t('common.modify')"
      :visible.sync="Visible"
      width="700px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Service_fee_name_zh')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            :disabled="typeName=='look'"
            ref="name"
            @blur="handleBlur('name',$event)"
            @focus="handleFocus($event)"
            :class="typeName=='look'?'':'Required'"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Service_fee_name_en')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            :disabled="typeName=='look'"
            ref="name_en"
            @blur="handleBlur('name_en',$event)"
            @focus="handleFocus($event)"
            :class="typeName=='look'?'':'Required'"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name_en"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Service_fee_name_ru')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            :disabled="typeName=='look'"
            ref="name_ru"
            @blur="handleBlur('name_ru',$event)"
            @focus="handleFocus($event)"
            :class="typeName=='look'?'':'Required'"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.name_ru"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Server_charging_method')}}:</span
        >
        <span class="Span borderB contant">
          <el-select
            :disabled="typeName=='look'"
            ref="chargeMethod"
            :class="typeName=='look'?'':'Required'"
            filterable
            @blur="handleBlur('chargeMethod', $event)"
            @change="handleChang('chargeMethod')"
            v-model="data.chargeMethod"
            :placeholder="$t('common.select_plactholder')"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </span>
        <span v-if="data.chargeMethod!=6" style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Payment_unit_price')}}/$:</span
        >
        <span v-if="data.chargeMethod!=6" class="Span borderB contant">
          <el-input-number
            :disabled="typeName=='look'"
            controls-position="right"
            :class="typeName=='look'?'':'Required'"
            size="small" 
            ref="unitPrice" 
            @blur="handleBlur('unitPrice', $event)" 
            @focus="handleFocus($event)" 
            :min="0" 
            :precision="2"
            v-model="data.unitPrice">
          </el-input-number>
        </span>
        <span v-if="data.chargeMethod==6" style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Payment_cost')}}/$:</span
        >
        <span v-if="data.chargeMethod==6" class="Span borderB contant">
          <el-input-number
            :disabled="typeName=='look'"
            controls-position="right"
            size="small"  
            :min="0" 
            :precision="2"
            v-model="data.cost">
          </el-input-number>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Service_fee_introduction_zh')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            :disabled="typeName=='look'"
            ref="introduce"
            @blur="handleBlur('introduce',$event)"
            @focus="handleFocus($event)"
            :class="typeName=='look'?'':'Required'"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.introduce"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR borderB"
          >{{$t('ServiceFeeManagementLang.Service_fee_introduction_en')}}:</span
        >
        <span class="Span borderB contant">
          <el-input
            :disabled="typeName=='look'"
            ref="introduce_en"
            @blur="handleBlur('introduce_en',$event)"
            @focus="handleFocus($event)"
            :class="typeName=='look'?'':'Required'"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.introduce_en"
          ></el-input>
        </span>
        <span style="text-align: right" class="Span borderR"
          >{{$t('ServiceFeeManagementLang.Service_fee_introduction_ru')}}:</span
        >
        <span class="Span contant">
          <el-input
            :disabled="typeName=='look'"
            ref="introduce_ru"
            @blur="handleBlur('introduce_ru',$event)"
            @focus="handleFocus($event)"
            :class="typeName=='look'?'':'Required'"
            :placeholder="$t('common.input_plactholder')"
            v-model="data.introduce_ru"
          ></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="typeName!='look'" type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      data: {},
      options:[],
      id:'',
      confirmTrue: true, //确定按钮保护
      typeName:'',
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data,typeName) {
      this.getOptions()
      this.id = data.id;
      this.typeName=typeName
      this.Visible = true;
      this.getData()
    },
    //获取下拉单数据
    getOptions(){
      this.$get("surveySysItems").then((res) => {
        this.options = res.data.survey_type;
      });
    },
    //获取单条
    getData() {
      this.$get("additionalChargeInfo", { id: this.id }).then(
        (res) => {
          this.data = res.data;
        }
      );
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.name){
        this.$refs.name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.name_en){
        this.$refs.name_en.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.name_ru){
        this.$refs.name_ru.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.chargeMethod&&this.data.chargeMethod!==0) {
        this.$refs.chargeMethod.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(this.data.chargeMethod!=6){
        if(!this.data.unitPrice){
          this.$refs.unitPrice.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      if(!this.data.introduce){
        this.$refs.introduce.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.introduce_en){
        this.$refs.introduce_en.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.introduce_ru){
        this.$refs.introduce_ru.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("id", this.id);
        params.append("name", this.data.name);
        params.append("name_en", this.data.name_en);
        params.append("name_ru", this.data.name_ru);
        params.append("chargeMethod", this.data.chargeMethod);
        if(this.data.chargeMethod!=6){
          params.append("unitPrice", this.data.unitPrice);
        }else{
          params.append("cost", this.data.cost);
        }
        params.append("introduce", this.data.introduce);
        params.append("introduce_en", this.data.introduce_en);
        params.append("introduce_ru", this.data.introduce_ru);
        this.$postForm("additionalChargeEdit", params).then((res) => {
            this.confirmTrue = true;
            if(res.success){
              this.$message.success(res.msg);
              this.$emit("success");
              this.cancel()
            }
          });
        }
    },
    //取消
    cancel() {
      this.data = {};
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .Span{
    width: 50%;
  }
</style>